<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      >
     <h:head>
		<h:outputStylesheet name="common-style.css" library="css" />
	</h:head>
   
   
    <h:body>
    		<div id="page">
    	
	    		<ui:insert name="header" >
					<ui:include src="/template/common/commonHeader.xhtml" />
				</ui:insert>
			   	
			 <div id="contentwrap">
			 	<h:form id="frmSingup" > 
					<div id="body_area">
					 	<div  id="body_background">
					 		<div id="content_topBar" >
					 			<h:outputText  style="color:threeddarkshadow; font-size:medium; font-weight:normal;" value="#{msg.signHeader}" ></h:outputText>
					 		</div>
				
					 		<div id="signupform">
					 	
					 			<h:panelGrid columns="2" >
					 				<h:outputLabel value="#{msg.firstName}" ></h:outputLabel>
					 				<h:panelGroup  >
						 				<div id="redStar">*</div>
					 					<h:inputText id="fName" style="width:150px;"  value="#{user.firstName}" required="true"  ></h:inputText>
					 					<h:message for="fName" styleClass="required" ></h:message>
					 				</h:panelGroup>
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.lastName}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar"></div>
					 					<h:inputText  style="width:150px;" value="#{user.lastName}" />
					 				</h:panelGroup>
					 				
					 				<h:panelGroup style="width:200px">
					 					<h:outputLabel value="#{msg.emailAddress}" />	
					 				</h:panelGroup>
					 				<h:panelGroup style="width:130px" >
					 					<div id="redStar">*</div>
					 					<h:inputText style="width:150px;" id="email"  required="true" value="#{user.actualUser.emailAddress}"  >
					 						<f:validator validatorId="email.validation" />
					 					</h:inputText>
					 					<h:message for="email" styleClass="required" ></h:message>
					 				</h:panelGroup>
					 				
					 				<h:panelGroup style="width:200px">
					 					<h:outputLabel value="#{msg.mobileNumber}" />
					 				</h:panelGroup>
					 				<h:panelGroup style="width:130px" >
					 					<div id="redStar">*</div>
					 					<h:inputText style="width:150px;" id="mobNr"  required="true" value="#{user.actualUser.mobNr}"  >
					 						<f:validator validatorId="phoneValidation" ></f:validator>
					 					</h:inputText>
					 					<h:message for="mobNr" styleClass="required" ></h:message>
					 					<h:outputText styleClass="required" id="phExistError" value="#{user.phExist}" ></h:outputText>
					 				</h:panelGroup>
					 				
					 						
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.password}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar">*</div>
					 					<h:inputSecret style="width:150px;" redisplay="true" binding="#{password}"  required="true" id="pwd" value="#{user.actualUser.pwd}"  >
					 					</h:inputSecret>
					 					<h:message for="pwd" styleClass="required" ></h:message>
					 					
					 				</h:panelGroup>
					 				
					 				
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.confirmPassword}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar">*</div>
					 					<h:inputSecret redisplay="true" required="true" id="confirmPwd" style="width:150px;"  >
						 					<f:validator validatorId="confirmPasswordValidator" />
 											<f:attribute name="password" value="#{password}" />					 					</h:inputSecret>
					 					<h:message for="confirmPwd" styleClass="required" ></h:message>

					 				</h:panelGroup>
					 				
					 		
					 					
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.address}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar"></div>
					 					<h:inputText size="50"  value="#{user.actualUser.address}" ></h:inputText>
					 				</h:panelGroup>
					 						
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.postalCode}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar"></div>
					 					<h:inputText size="10"  value="#{user.actualUser.postalcode}"  ></h:inputText>
					 				</h:panelGroup>
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.city}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar">*</div>
					 					<h:inputText required="true" size="10" id="city" value="#{user.actualUser.city}" ></h:inputText>
					 					<h:message for="city" styleClass="required" ></h:message>
					 					
					 				</h:panelGroup>
					 				<h:panelGroup >
					 					<h:outputLabel value="#{msg.mobileModel}" />	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					<div id="redStar"></div>
					 					<h:inputText size="10"  value="#{user.actualUser.mobModel}" ></h:inputText>
					 				</h:panelGroup>
					 				<!-- <h:panelGroup >
					 					<h:outputText value="Mobil Model Type:" ></h:outputText>	
					 				</h:panelGroup>
					 				<h:panelGroup  >
					 					&nbsp;&nbsp;<h:inputText size="10"  value="#{user.actualUser.mobModelNr}" ></h:inputText>
					 				</h:panelGroup> -->
					 		        <h:panelGroup/>
					 				<h:panelGroup>
					 					<br/><br/>
					 					<h:commandButton     action="#{user.saveUser}" id="savebtn" value="#{msg.submit}"   ></h:commandButton>&nbsp;&nbsp;&nbsp;
					 					<h:commandButton  value="#{msg.clear}" action="#{user.clearUser}" immediate="true"  ></h:commandButton>
					 				</h:panelGroup>		
					 			</h:panelGrid>
					 		</div>
					  	</div>
					</div>
 			</h:form> 
				<ui:insert id="sideBar" >
		   			<ui:include src="/template/common/commonSidebar.xhtml" />
		   		</ui:insert>
		</div>
		    	<ui:insert name="footer" >
			    		<ui:include src="/template/common/commonFooter.xhtml" />
			    	</ui:insert>
		    	</div>
    </h:body>
</html>	